<template>
  <div>
    <el-button type="primary" style="margin: 0.5% 0.5% 0.5% 0.5%;" @click="showAddDialog" >添加</el-button>
    <el-table
      :data="paramsData"
      style="width: 100%"
      @row-click="handleRowClick"
    ></el-table>
    <el-table
      :data="paramsData"
      style="width: 100%"
      @row-click="handleRowClick"
    >
        <el-table-column
        label="序号"
        width="60">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="参数名称">
      </el-table-column>
      <el-table-column
        prop="value"
        label="参数值">
      </el-table-column>
      <el-table-column
        label="操作"
        width="180">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="添加规格参数"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form :model="newParam">
        <el-form-item label="参数名称">
          <el-input v-model="newParam.name"></el-input>
        </el-form-item>
        <el-form-item label="参数值">
          <el-input v-model="newParam.value"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addParam">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paramsData: [
        { name: '颜色', value: '红色' },
        { name: '尺寸', value: 'M' },
        { name: '重量', value: '300g' },
        { name: '数量', value: '157' },
        // 更多规格参数数据...
      ],
      dialogVisible: false, // 控制添加对话框的显示隐藏
      newParam: { name: '', value: '' }, // 存储待添加的新参数
    };
  },
  methods: {
    handleRowClick(row) {
      console.log('Clicked row:', row);
    },
    showAddDialog() {
      this.dialogVisible = true;
    },
    handleEdit(row) {
      this.$message({
        type: 'warning',
        message: '您没有权限进行编辑操作!'
      });
    },
    addParam() {
      // 确认添加新参数
      if (this.newParam.name && this.newParam.value) {
        this.paramsData.push(this.newParam);
        this.$message({ type: 'success', message: '添加成功!' });
        this.dialogVisible = false;
        this.newParam = { name: '', value: '' }; // 清空表单
      } else {
        this.$message({ type: 'warning', message: '请输入完整的信息!' });
      }
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该规格参数, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.paramsData.indexOf(row);
        this.paramsData.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
};
</script>

<style lang='less' scoped>
/* 您可以在这里添加表格的样式 */
</style>